<template>
<div>
  <el-card>
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cscindex' }">客户服务中心</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
        <!--      搜索区-->
    <el-select v-model="select.queryType" placeholder="请选择" size="mini" style="float:left">
        <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
    <el-row style="float:left;margin-left:5px;">
      <el-col :span="15">
        <el-input placeholder="请输入查询的相关信息" v-model="select.queryContain"  clearable @clear="getList" size="mini">
        </el-input>
      </el-col>
      <el-col :span="3" style="margin-left: 5px">
        <el-button type="primary" @click="selected" size="mini">搜索</el-button>
      </el-col>
    </el-row>
    <br>
    <br>
    <!--    表格-->
    <el-table :data="tableData.slice((pageInfo.curPage-1)*pageInfo.pagesize,pageInfo.curPage*pageInfo.pagesize)" border style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="80"></el-table-column>
      <el-table-column fixed prop="clientId" label="客户编号" width="80"></el-table-column>
      <el-table-column prop="orderType" label="订单类型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.changeType">
              <el-select v-model="editdata.orderType" placeholder="请选择" size="small">
                <el-option v-for="item in changestatusoptions" :key="item.value" :label="item.lable" :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span v-else>
              <span v-if="scope.row.orderType===0">有效订单</span>
              <span v-if="scope.row.orderType===1">撤销订单</span>
              <span v-if="scope.row.orderType===2">换货订单</span>
              <span v-if="scope.row.orderType===3">退货订单</span>
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="consigneephone" label="收货人电话" width="150">
         <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.consigneephone" placeholder='请输入收件人电话'></el-input>
            </span>
            <span v-else>{{ scope.row.consigneephone}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="finishDate" label="配送日期" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-date-picker v-model="editdata.finishDate" type="date" placeholder="选择日期" size="small" style="width:150px"> </el-date-picker>
            </span>
            <span v-else>{{ scope.row.finishDate}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="shippingAddress" label="收货地址" width="300">
         <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.shippingAddress" placeholder='请输入收件地址'></el-input>
            </span>
            <span v-else>{{ scope.row.shippingAddress}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="receiver" label="收货人" width="130">
        <template slot-scope="scope">
            <span v-if="scope.row.isSet">
              <el-input size="mini" v-model="editdata.receiver" placeholder='请输入收件人'></el-input>
            </span>
            <span v-else>{{ scope.row.receiver}}</span>
          </template>
      </el-table-column>
      <el-table-column prop="theTotalAmountOfOrders" label="订单总金额" width="120"></el-table-column>
      <el-table-column prop="deliveryInformation" label="投递信息" width="120"></el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus===1">缺货</span>
          <span v-if="scope.row.orderStatus===2">调度中</span>
          <span v-if="scope.row.orderStatus===3">已领货</span>
          <span v-if="scope.row.orderStatus===3">配送完成</span>
          <span v-if="scope.row.orderStatus===0">可分配</span>
          <span v-if="scope.row.orderStatus===5">已退货</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="100">
        <template slot-scope="scope">
            <span v-if="scope.row.changeType">
              <el-input size="mini" v-model="editdata.remark" placeholder='备注信息'></el-input>
            </span>
            <span v-else>{{ scope.row.remark}}</span>
          </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template slot-scope="scope">
           <span v-if="scope.row.isSet">
            <el-button @click="save(scope.row,scope.$index)" type="success" size="small" style="margin-left:10px">
              保存
            </el-button>
              <el-button type="primary" size="small" @click="noEdit(scope.row,scope.$index)">取消</el-button>
          </span>
          <span v-else>
            <el-button @click="edit(scope.row,scope.$index)" type="success" size="small" style="margin-left:10px" :disabled="scope.row.changeType">
              编辑
            </el-button>
            <el-button type="danger" size="small"  @click="handleCancel(scope.$index, scope.row)"  :disabled="scope.row.orderType==1" >撤销</el-button>
          </span>
          <span v-if="scope.row.changeType">
          <el-button type="primary" size="small" style="margin-left:10px" @click="savechange(scope.row,scope.$index)">保存</el-button>
          </span>
          <span v-else>
            <el-button type="primary" size="small" style="margin-left:10px"  @click="change(scope.row,scope.$index)" :disabled="scope.row.orderType==1||scope.row.isSet"> 退换</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
       <!-- 分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.curPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
        </el-pagination>
        <!-- 撤销原因对话框 -->
        <el-dialog title="撤销原因" :visible.sync="dialogVisible" width="50%" center>
          <el-input v-model="editdata.remark" placeholder="请输入撤销原因！"></el-input>
          <br>
          <br>
          <el-button type="primary" size="small" @click="yes">确定</el-button>
          <el-button size="small" @click="no" style="float:right" >取消</el-button>
        </el-dialog>
  </el-card>
</div>
</template>
<script>
    export default {
      name:'orderlist',
      data(){
        return{
          tableData:[],
          // 分页
          pageInfo: {
            query:'',
            curPage:1,
            pagesize:5
          },
          // 表格总数
          total:0,
          // 撤销id
          cancelorderid:'',
          editdata:{
            // 不可变
            clientId:'',
            id:'',
            fundingInformation:'',
            theTotalAmountOfOrders:'',
            deliveryInformation:'',
            orderStatus:'',
            orderType:'',
            // 可变
            consigneephone:'',
            finishDate:'',
            receiver:'',
            remark:'',
            shippingAddress:''
          },
          //选项
          changestatusoptions:[
            {
              lable:'换货',
              value:'2'
            },
            {
              lable: '退货',
              value:'3'
            }
          ],
          selectoptions:[
            {
              label:'订单ID',
              value:'0'
            },
            {
              label:'客户ID',
              value:'1'
            }
          ],
          // 条件查询
          select:{
            queryType:'',
            queryContain:''
          },
          dialogVisible:false
        }
      },
      methods:{
        //获取数据
        async getList(){
          const{data:res}=await this.$http
           .get(`/api/order_manager/query_all_order/${5}`)
            .catch(err=>{
              this.$message.error('对不起，服务器异常或没有权限！请多试几次')
              console.log(err.message)
            })
            if(res.code!==200){
              this.$message.error(res.msg)
            }
            this.tableData=res.data
            this.total=res.data.length
            let result = res.data
            this.tableDate = result.map(item=>{
              item.isSet = false
              item.changeType=false
              return item
            })         
        },
           // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageInfo.pagesize=val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.curPage=val
        },
        //传递编辑数据
        async editList(){
          console.log(this.editdata);
          const{data:res}=await this.$http
          .post('/api/order_manager/update_one_order',this.editdata)
          .catch(err=>{
            this.$message.error('服务器异常或权限不够！')
            console.log(err.message)
          })
          if(res.code!==200){
            this.$message.error('修改失败！')
          }else{
            this.$message.success('修改成功！')
            this.getList()
            this.editdata.remark=''
          }
        },
        //取消编辑
        noEdit(row,index){
          var newindex=0
          newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
          this.tableData[newindex].isSet=false
          this.$forceUpdate()
        },
        //修改数据
        edit(row,index){
          var newindex=0
          newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
          this.tableData[newindex].isSet=true
          this.$forceUpdate()
        },
        //保存修改数据
        save(row,index){
          if(this.editdata.consigneephone===''||this.editdata.finishDate===''||this.editdata.shippingAddress===''||this.editdata.receiver===0){
            this.$message.error('必要信息未填写完成，请检查后再保存！')
          }else{
            this.editdata.orderType=row.orderType
            this.editdata.orderStatus=row.orderStatus
            this.editdata.id=row.id
            this.editdata.clientId=row.clientId
            this.editdata.fundingInformation=row.fundingInformation
            this.editdata.deliveryInformation=row.deliveryInformation
            this.editdata.finishDate=this.getData(this.editdata.finishDate)
            this.editList()
            var newindex=0
            newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
            this.tableData[newindex].isSet=false
            this.$forceUpdate()
          }
        },
        //取消撤销
        no(){
          this.dialogVisible=false
        },
        //确定撤销
        yes(){
          if(this.editdata.remark===''){
            this.$message.error('未填写备注信息')
          }else{
            this.cancelorder()
            this.$forceUpdate()
          }
        },
        //撤销订单
        handleCancel(index,row){
          this.dialogVisible=true
          this.cancelorderid=row.id
        },
        //传递撤销id
        async cancelorder(){
          const remark=this.editdata.remark
          const id=this.cancelorderid
          const opreator=sessionStorage.getItem("userId")
          const{ data: res}=await this.$http
          .get(`/api/order_manager/logic_delete/${id}/${opreator}/${remark}`)
          .catch(err => {
              this.$message.error('对不起，服务器异常或没有权限！请多试几次')
              console.log(err.message)
            })
            console.log(res);
            if (res.code !== 200) {
                this.$message.error('撤销订单失败')
            }else{
              this.dialogVisible=false
              this.$message.success('撤销订单成功')
              this.getList()
              this.editdata.remark=''
            }
        }, 
        //改变退换状态
        change(row,index){
          var newindex=0
          newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
          this.tableData[newindex].changeType=true
          this.$forceUpdate()
        },
        //保存退换操作
        savechange(row,index){
          if(this.editdata.remark===''){
            this.$message.error('请在备注信息处填写退/换货原因！')
          }else{
            this.editdata.id=row.id
            this.editdata.clientId=row.clientId
            this.editdata.orderStatus=row.orderStatus
            this.editdata.fundingInformation=row.fundingInformation
            this.editdata.finishDate=row.finishDate
            this.editdata.consigneephone=row.consigneephone
            this.editdata.deliveryInformation=row.deliveryInformation
            this.editdata.shippingAddress=row.shippingAddress
            this.editdata.receiver=row.receiver
            // this.editdata.remark=row.remark
            this.editList()
            var newindex=0
            newindex=((this.pageInfo.curPage-1)*this.pageInfo.pagesize)+index
            this.tableData[newindex].changeType=false
            this.$forceUpdate()
          }
        },
        // 返回时间
        getData(date) {
          var Y = date.getFullYear() + '-'
          var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
          var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' '
          // var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':'
          // var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':'
          // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds())
          var h=0+':'
          var m=0+':'
          var s=0
          console.log(Y+M+D+h+m+s)
          return Y+M+D+h+m+s
        },
        //搜索按钮
        selected(){
          if(this.select.queryType===''){
            return this.$message.error('请选择关键词')
          }else if(this.select.queryType==='1'&&this.select.queryContain!==''){
            this.selectbyclientid()
          }else if(this.select.queryType==='0'&&this.select.queryContain!==''){
            this.selectbyid()
          }
          if(this.input===''){
            this.getList()
          }
        },
        //搜索数据byclientid
        async selectbyclientid(){
          const {data:res}=await this.$http
          .post('/api/order_manager/query_order_on_require',this.select)
          .catch(err=>{
            this.$message.error('服务器异常或权限不够！')
            console.log(err.msg)
          })
          if(res.code!==200){
            this.$message.error('查询失败！')
          }else{
            console.log(res);
            this.tableData=[]
            this.tableData=res.data
            this.total=res.data.length
            this.$forceUpdate()
            this.$message.success('查询成功！')
          }
        },
        //搜索数据byid
        async selectbyid(){
          const id=this.select.queryContain
          const {data:res}=await this.$http
          .get(`/api/order_manager/query_order/${id}`)
          .catch(err=>{
            this.$message.error('服务器异常或权限不够！')
            console.log(err.msg)
          })
          if(res.code!==200){
            this.$message.error('查询失败！')
          }else{
            console.log(res);
            this.total=res.data.length
            this.tableData=[]
            this.tableData.push(res.data)
            this.$forceUpdate()
            this.$message.success('查询成功！')
          }
        }
      },
      created(){
        this.getList()
      }
    }
</script>

